<template>
  <view class="pages">
    <u-sticky
      class="sticky_c"
      offsetTop="0"
      :style="{ backgroundColor: scrollBgc ? '#62CCCB' : 'rgba(0,0,0,0)' }"
    >
      <h-line :height="statusHeight"></h-line>
      <view class="navbar">
        <view class="nav_b">
          <u-icon name="arrow-left" size="20" color="#202020" @click="goBack" :bold="true"></u-icon>
        </view>
        <view class="page_title">联系客服</view>
      </view>
      <view></view>
    </u-sticky>

    <view class="bottom_box">
      <view class="slogan">
        <view>Hi ~</view>
        <view>有什么可以帮您!</view>
      </view>
      <view class="service_content">
        <image src="@/static/patient/service_phone.png" @click="makePhone" mode="scaleToFill" />
        <view class="phone_code_box">
          <view>400客服电话</view>
          <view style="color: #00c1b9; margin-left: 10rpx">{{ serviceTelephone }}</view>
        </view>
        <view class="service_info">客服电话工作日可能遇忙，请耐心等待</view>
        <view class="service_time">工作时间：工作日9:00-18:00</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { navigateBack, navigateTo, showToast, switchTab } from '@/utils'
import { getServiceTelephone } from '@/api/patients/index.js'
const scrollBgc = ref(false)
const statusHeight = ref()
const screenHeightValue = ref(0)
const isShoww = ref()

onLoad(() => {
  uni.getSystemInfo({
    success: (e) => {
      let value = e?.screenHeight * 2
      statusHeight.value = e?.statusBarHeight * 2
      screenHeightValue.value = value - statusHeight.value
      console.log(e)
    },
  })
  getServiceTelephoneFn()
})
onPageScroll((e) => {
  isShoww.value = e.scrollTop
  if (e.scrollTop > 40) {
    scrollBgc.value = true
  } else {
    scrollBgc.value = false
  }
})
function goBack() {
  navigateBack()
}
//获取客服电话
const serviceTelephone = ref('')
async function getServiceTelephoneFn() {
  const res = await getServiceTelephone()
  if (res?.code == 200) {
    serviceTelephone.value = formatPhoneNumber(res.data.sute_app_service)
  }
}
//电话号格式化
function formatPhoneNumber(phoneNumber) {
  // 去除所有非数字字符
  var cleaned = phoneNumber.replace(/\D/g, '')
  var formatted = ''
  var isValidLength = cleaned.length === 11
  if (isValidLength) {
    formatted = cleaned.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
  } else {
    formatted = cleaned.replace(/(\d{3})(\d{4})(\d{3})/, '$1-$2-$3')
  }

  return formatted
}
//拨打电话
function makePhone() {
  uni.makePhoneCall({
    phoneNumber: serviceTelephone.value,
  })
}
</script>
<style>
page {
  background: #f5f6f8;
}
</style>
<style lang="scss" scoped>
.sticky_c {
  top: 0 !important;
  background: rgba(0, 0, 0, 0);

  .navbar {
    padding: 0 24rpx;
    width: 100vw;
    height: 100rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    .page_title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #202020;
      margin-left: 11rpx;
      margin-right: 20rpx;
      line-height: 100rpx;
      text-align: center;
      flex: 1;
    }
    .nav_b {
      width: 32rpx;
      height: 32rpx;
      padding: 30rpx 0;
    }
    .navbar_img {
      width: 32rpx;
      height: 32rpx;
      padding: 34rpx 0;
    }
  }
}
.pages {
  position: relative;
  width: 750rpx;
  height: 100vh;
  background: url('@/static/patient/service_bg.png') no-repeat;
  background-size: contain;
  font-family: PingFangSC, PingFang SC;
  display: flex;
  flex-direction: column;
  .bottom_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 20rpx;
    .slogan {
      font-weight: 600;
      font-size: 36rpx;
      color: #202020;
      margin-left: 60rpx;
      margin-top: 80rpx;
      height: 120rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 80rpx;
    }
    .service_content {
      flex: 1;
      width: 702rpx;
      background: #ffffff;
      border-radius: 20rpx;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 220rpx;
      image {
        width: 100rpx;
        height: 100rpx;
      }
      .phone_code_box {
        display: flex;
        align-items: center;
        margin: 20rpx 0;
        font-weight: 500;
        font-size: 30rpx;
        color: #202020;
      }
      .service_info {
        font-size: 26rpx;
        color: #aaaaaa;
      }
      .service_time {
        font-size: 26rpx;
        color: #aaaaaa;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
